<!--  -->
<template>
    <div>
        <template >
                    <el-form label-position="left" label-width="120px" class="table">
                    <el-form-item label="管理员账号">
                        <el-input v-model="AdminUser" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员密码">
                        <el-input v-model="AdminPwd"  class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="负责区域">
                        <el-input v-model="AdminArea"  class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="管理员姓名">
                        <el-input v-model="RealName"  class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码">
                        <el-input v-model="Phone"     class="input"></el-input>
                    </el-form-item>
                    <el-form-item class="button">
                    <el-button type="primary" @click="AdminAdd">立即创建</el-button>
                    <el-button @click="clear">重置</el-button>
                    </el-form-item>
                    </el-form>
         
          </template>
    </div>
    </template>
    
    <script>
    export default {
    data() {
    return {
          AdminUser: '',
          AdminPwd: '',
          RealName: '',
          Phone:null,
          AdminArea:''
    }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    
    },
    methods:{
        AdminAdd(){
            // console.log(this.RealName)
            // console.log(this.AdminArea)
        var url=`http://localhost:3000/AdminAdd?AdminUser=${this.AdminUser}&AdminPwd=${this.AdminPwd}&RealName=${this.RealName}&phone=${this.Phone}&AdminArea=${this.AdminArea}`
          if(this.AdminUser!==''&this.AdminPwd!==''&this.AdminArea!==''&this.Phone!==null&this.RealName!==''){
              this.axios.post(url).then(res=>{
                if(res.data.code==201){
                //   alert("添加失败")
                    this.open4()
                }else{
                //   alert("添加成功，快去看看吧")
                    this.open1()
                  this.clear()   //清空
                }
              })
          }else{
            alert("请填写内容")
          }
        },
        clear(){
            this.AdminUser=''
            this.AdminPwd=''
            this.AdminArea=''
            this.phone=''
            this.RealName=''
            // location.reload()  页面重新加载
        },
        open1() {
        this.$notify({
          title: '成功',
          message: '管理员新增成功',
          type: 'success'
        });
      },
      open4() {
        this.$notify.error({
          title: '错误',
          message: '管理员账号重复，试试其他的吧'
        });
      }
    }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
            .button{
                /* margin-left: 25%; */
                margin-left: -50px;
                
            }
            .button button{
                margin: 0px 20px;
                
            }
            .table{
                margin-left: 25%;
                margin-top: 5%;
            }
            .input{
                width: 250px;
            }
    </style>